<div class="todo-list">
  <div>
    <h3>Reactive Form</h3>
    <p>(injected$) {{ injected$ | async }}</p>
    <p>(injected() signal) {{ injected() }}</p>
    <form
      [formGroup]="pizzaForm"
      novalidate
      (ngSubmit)="onSubmit()"
      ngxsForm="todos.pizza"
      [ngxsFormDebounce]="debounce"
    >
      Toppings: <input type="text" formControlName="toppings" /> <br />
      Crust <input type="text" formControlName="crust" /> <br />
      Extras
      <span *ngFor="let extra of extras; let i = index">
        <input type="checkbox" [formControl]="extra" /> {{ allExtras[i].name }}
      </span>
      <br />
      <hr />
      <button type="submit">Set Olives</button>
      <button type="button" (click)="onPrefix()">Set Prefix</button>
      <button type="button" (click)="onLoadData()">Load Data</button>
    </form>
  </div>
  <br /><br />
  <hr />
  <h3>Todo Form</h3>
  <div class="add-todo">
    <input placeholder="New Todo" #text /> <button (click)="addTodo(text.value)">Add</button>
  </div>
  <ul>
    <li class="todo" *ngFor="let todo of todos$ | async; let i = index">
      (todos$) {{ todo }} <button (click)="removeTodo(i)">🗑</button>
    </li>
    <li class="todo" *ngFor="let todo of todos(); let i = index">
      (todos() signal) {{ todo }} <button (click)="removeTodo(i)">🗑</button>
    </li>
    <li *ngFor="let todo of pandas$ | async">(pandas$) 🐼</li>
    <li *ngFor="let todo of pandas()">(pandas() signal) 🐼</li>
  </ul>

  <div class="menu">
    <a [routerLink]="['/list']">List</a>
    <a [routerLink]="['/detail']">Detail</a>
    <a [routerLink]="['/counter']">Counter</a>
  </div>

  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>
